<!-- 横向柱状图 -->
<template>
  <div>
    <div>【问答次数】</div>
    <div ref="target" class="w-full h-full"></div>
  </div>
</template>
<script setup>
  import { ref, onMounted, watch } from 'vue'
  import * as echarts from 'echarts'

  const props = defineProps({
    data: {
      typeof: Object,
      required: true,
    }
  })

  // 1. 初始化 echarts 实例
  let mChart = null
  const target = ref(null)

  onMounted(() => {
    mChart = echarts.init(target.value)
    renderChart()
  })

  // 2. 构建 option 配置对象
  const renderChart = () => {
    var options;
    if (props.data.length == 0 ) {  //暂无数据
        options = {
            title: {
                text: '暂无数据',
                x: 'center',
                y: 'center',
                textStyle: {
                  fontSize: 14,
                  fontWeight: 'normal',
                }
              }
              
        }
    } else {
       options = {
          title:{
            text:''
          },
          tooltip: {
            trigger: 'axis',
          },
          xAxis: {
            type: 'category',
            data: props.data.map((item) => {
              if(item.keyString.length <= 2){
                return item.keyString+':00'
              }else{
                return item.keyString
              }
              //item.keyString.substring(0,10)
            }), // X 轴数据
            boundaryGap: false, // 曲线从原点开始
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              name: '数据量',
              type: 'line',
              data: props.data.map((item) => item.number), // Y 轴数据
              smooth: true, // 平滑曲线
              areaStyle: {
                color: 'rgba(58,138,143,0.2)', // 曲线下方填充颜色
              },
              lineStyle: {
                color: '#479ad3', // 曲线颜色
              },
            },
          ],
          grid: {
            left: "5%",
            right: "10%",
            top: "5%",
            bottom: "5%",
            containLabel: true,
          },
      }
    }
    // 3. 通过 实例.setOptions(option)
    mChart.setOption(options,true);
  }

  watch(() => props.data, renderChart)

</script>
<style lang="scss" scoped>

</style>